<template>
  <div class="users-wrapper">
    <div class="users">
        <label for="">
            <p>昵称：</p>
            <input type="text" class="style-input" v-model="name">
        </label>
        <label for="">
            <p>电话：</p>
            <input type="text" class="style-input" v-model="tel">
        </label>
        <label for="">
            <p>电子邮件：</p>
            <input type="text" class="style-input" v-model="email">
        </label>
        <label for="">
            <p>内容: </p>
            <textarea name="" id="text" cols="70" rows="10" v-model="content"></textarea>
        </label>
        <div class="btn">
            <button @click="sumbit">提交</button>
        </div>
        <div class="message">
            <p>美食甜品，感谢您的关注</p>
            <p class="en">Food dessert. thank you for your attention and you</p>
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'vant'
export default {
  data () {
    return {
      name: '',
      tel: '',
      email: '',
      content: ''
    }
  },
  methods: {
    sumbit () {
      let name = this.name
      let tel = this.tel
      let email = this.email
      let content = this.content
      let date = '2020-12-15'
      if (!name || !tel || !email || !content) {
        Toast('还有信息没有填写完整')
      } else {
        axios.post('/clients/leaveMessage', {
          name: name,
          tel: tel,
          email: email,
          content: content,
          date: date
        }).then((response) => {
          let res = response.data
          if (res.status === 0) {
            Toast('感谢你的建议')
            this.name = ''
            this.tel = ''
            this.email = ''
            this.content = ''
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.users-wrapper {
    margin-bottom: 50px;
    margin-top: 60px;
    .users {
        width: 39%;
        // background-color: pink;
        margin: 0 auto;
        p {
            margin-top: 20px;
            margin-bottom: 10px;
        }
        .style-input {
            width: 580px;
            background-color: #eee;
            border: 1px dashed #555;
        }
        #text {
            background-color: #eee;
            border: 1px dashed #555;
        }
        .btn {
            margin-top: 10px;
            margin-left: 200px;
            button {
                width: 200px;
                height: 30px;
                border:none;
                background-color: #bfa27b;
                color: #fff;
            }
        }
        .message {
            color: rgb(191, 162, 123);
            p {
                text-align: center;
                font-size: 20px;
                font-weight: 700;
            }
            .en {
                font-size: 14px;
                font-weight: normal;
            }
        }
    }
}
</style>
